<template>
  <view class="my-order">
    <view v-for="item in orders" :key="item.id" class="order-item">
      <view class="title">订单号：{{ item.orderNo }}</view>
      <view class="info">{{ item.courtName }} | {{ item.date }} {{ item.time }}</view>
      <view class="price">￥{{ item.amount }}</view>
      <view class="status" :class="item.status">{{ statusText(item.status) }}</view>
      <button v-if="item.status === 'UNPAID'" @click="payOrder(item.id)">去支付</button>
      <button v-if="item.status === 'PAID'" @click="cancelOrder(item.id)">取消订单</button>
    </view>
    <empty v-if="!orders.length" text="暂无订单"/>
  </view>
</template>

<script setup>
import {ref, onMounted} from 'vue'
import {request} from '@/utils/request'

const orders = ref([])

onMounted(async () => {
  orders.value = await request({url: '/api/order/list'})
})

const statusText = (status) => {
  switch (status) {
    case 'UNPAID':
      return '待支付'
    case 'PAID':
      return '已支付'
    case 'CANCELLED':
      return '已取消'
    case 'COMPLETED':
      return '已完成'
    default:
      return status
  }
}

const payOrder = async (id) => {
  // 跳转支付页面或调用支付接口
  uni.showToast({title: '支付功能待接入', icon: 'none'})
}

const cancelOrder = async (id) => {
  await request({url: `/api/order/cancel?id=${id}`, method: 'POST'})
  uni.showToast({title: '订单已取消', icon: 'success'})
  orders.value = await request({url: '/api/order/list'})
}
</script>

<style scoped>
.my-order {
  padding: 20rpx;
}

.order-item {
  background: #fff;
  border-radius: 8rpx;
  margin-bottom: 20rpx;
  padding: 20rpx;
}

.title {
  font-size: 28rpx;
  font-weight: bold;
}

.info {
  color: #888;
  margin: 10rpx 0;
}

.price {
  color: #fa541c;
  font-size: 32rpx;
  margin-bottom: 10rpx;
}

.status {
  font-size: 28rpx;
}

.status.UNPAID {
  color: #faad14;
}

.status.PAID {
  color: #67c23a;
}

.status.CANCELLED {
  color: #ccc;
}

.status.COMPLETED {
  color: #007aff;
}
</style>
